<template>
    <div class="">
        <!--<div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-copy"></i> tab选项卡</el-breadcrumb-item>
            </el-breadcrumb>
        </div>-->
        <div class="container">
            <el-tabs v-model="message">
                <el-tab-pane :label="`未读消息(${unreadNum})`" name="first">
                    <el-table :data="unread" :show-header="false" style="width: 100%">
                        <el-table-column v-if='false'>
                            <template slot-scope='scope'>
                                <span>{{scope.row.id}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column>
                            <template slot-scope="scope">
                                <span class="message-title">{{scope.row.title}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createTime" width="180"></el-table-column>
                        <el-table-column width="250">
                            <template slot-scope="scope">
                                <el-button size="small" type='success' @click="showDetail(scope.row)">查看</el-button>
                                <el-button size="small" type='primary' @click="handleRead(scope.row)">标为已读</el-button>
                                <el-button type="danger" @click="handleDel(scope.row, 1)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="handle-row">
                        <el-button type="primary" @click='handleReadAll'>全部标为已读</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane :label="`已读消息(${read.length})`" name="second">
                    <template v-if="message === 'second'">
                        <el-table :data="read" :show-header="false" style="width: 100%">
                            <el-table-column v-if='false'>
                                <template slot-scope='scope'>
                                    <span>{{scope.row.id}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column>
                                <template slot-scope="scope">
                                    <span class="message-title">{{scope.row.title}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="createTime" width="150"></el-table-column>
                            <el-table-column width="180">
                                <template slot-scope="scope">
                                    <el-button size="small" type='success' @click="showDetail(scope.row)">查看</el-button>
                                    <el-button type="danger" @click="handleDel(scope.row, 1)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="handle-row">
                            <el-button type="danger" @click='logicDeleteAll'>删除全部</el-button>
                        </div>
                    </template>
                </el-tab-pane>
                <el-tab-pane :label="`回收站(${recycle.length})`" name="third">
                    <template v-if="message === 'third'">
                        <el-table :data="recycle" :show-header="false" style="width: 100%">
                            <el-table-column v-if='false'>
                                <template slot-scope='scope'>
                                    <span>{{scope.row.id}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column>
                                <template slot-scope="scope">
                                    <span class="message-title">{{scope.row.title}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="createTime" width="150"></el-table-column>
                            <el-table-column width="220">
                                <template slot-scope="scope">
                                    <el-button size="small" type='success' @click="showDetail(scope.row)">查看</el-button>
                                    <el-button type="danger" @click="handleDel(scope.row, 2)">删除</el-button>
                                    <el-button @click="handleRestore(scope.row)">还原</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="handle-row">
                            <el-button type="danger" @click='clearRecycle'>清空回收站</el-button>
                        </div>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </div>

        <el-dialog v-dialogDrag
                   custom-class="dialogClass"
                   title="站内信详情"
                   :modal-append-to-body="false"
                   :append-to-body="true"
                   :visible.sync="detailDialogVisible"
                   :before-close='saveCancel'
                   width="45%"
                   top="15vh">

            <el-form :model="stationMsgForm" ref="modifyPwdFormRef" label-width="100px"
                     label-position="left">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="stationMsgForm.title" type="text" readonly='readonly'></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <el-input v-model="stationMsgForm.content" type="textarea" :autosize="{minRows:2,maxRows:20}" readonly='readonly'></el-input>
                </el-form-item>
                <el-form-item label="发布时间" prop="createTime">
                    <el-input v-model="stationMsgForm.createTime" type="text" readonly='readonly'></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="saveCancel">我知道了</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    import { Message } from 'element-ui';
    import {
        deleteAllStaMsg,
        deleteStaMsg,
        getStaMsgList,
        logicDeleteAllStaMsg,
        logicDeleteStaMsg,
        realAllStaMsg,
        updateStaMsg
    } from '@/api/StaMsgApi';

    export default {
        name: 'tabs',
        data() {
            return {
                message: 'first',
                showHeader: false,
                unread: [],
                unreadNum: 0,
                read: [],
                readNum: 0,
                recycle: [],
                recycleNum: 0,

                detailDialogVisible: false,
                stationMsgForm: {
                    id: "",
                    title: "",
                    content: "",
                    createTime: "",
                }
            }
        },

        mounted() {
            this.initUnReadList();
            this.initReadList();
            this.initRecycleList();
        },

        methods: {
            showDetail(row) {
                this.stationMsgForm.id = row.id;
                this.stationMsgForm.title = row.title;
                this.stationMsgForm.content = row.content;
                this.stationMsgForm.createTime = row.createTime;
                this.detailDialogVisible = true;
            },
            saveCancel() {
                this.detailDialogVisible = false;
            },

            initUnReadList() {
                const params = {};
                params.readStatus = 0;
                params.delFlag = 0;
                getStaMsgList(params).then(resp => {
                    if (resp && resp.status === 200) {
                        this.unread = resp.data;
                        this.unreadNum = this.unread.length;
                    }
                });
            },
            initReadList() {
                const params = {};
                params.readStatus = 1;
                params.delFlag = 0;
                getStaMsgList(params).then(resp => {
                    if (resp && resp.status === 200) {
                        this.read = resp.data;
                        this.readNum = this.read.length;
                    }
                });
            },
            initRecycleList() {
                const params = {};
                params.delFlag = 1;
                getStaMsgList(params).then(resp => {
                    if (resp && resp.status === 200) {
                        this.recycle = resp.data;
                        this.recycleNum = this.recycle.length;
                    }
                });
            },
            handleRead(row) {
                // const item = this.unread.splice(index, 1);
                // console.log(item);
                // this.read = item.concat(this.read);
                const params = {};
                params.id = row.id;
                params.readStatus = 1;
                updateStaMsg(params).then(resp => {
                    if (resp && resp.status === 200) {
                        this.initUnReadList();
                        this.initReadList();
                        Message.success("标记已读成功！");
                    }
                });
            },
            handleDel(row, type) {
                // const item = this.read.splice(index, 1);
                // this.recycle = item.concat(this.recycle);
                const params = {};
                params.id = row.id;
                if (type === 1) {
                    params.delFlag = 1;
                    logicDeleteStaMsg(params).then(resp => {
                        if (resp && resp.status === 200) {
                            this.initUnReadList();
                            this.initReadList();
                            this.initRecycleList();
                            Message.success("删除成功！");
                        }
                    });
                } else {
                    deleteStaMsg(params).then(resp => {
                        if (resp && resp.status === 200) {
                            this.initUnReadList();
                            this.initReadList();
                            this.initRecycleList();
                            Message.success("删除成功！");
                        }
                    });
                }
            },
            handleRestore(row) {
                // const item = this.recycle.splice(index, 1);
                // this.read = item.concat(this.read);
                const params = {};
                params.id = row.id;
                params.delFlag = 0;
                updateStaMsg(params).then(resp => {
                    if (resp && resp.status === 200) {
                        this.initUnReadList();
                        this.initReadList();
                        this.initRecycleList();
                        Message.success("还原成功！");
                    }
                });
            },
            handleReadAll() {
                const params = {};
                params.readStatus = 1;
                realAllStaMsg(params).then(resp => {
                    if (resp && resp.status === 200) {
                        this.initUnReadList();
                        this.initReadList();
                        this.initRecycleList();
                        Message.success("全部标记已读成功！");
                    }
                });
            },
            logicDeleteAll() {
                logicDeleteAllStaMsg().then(resp => {
                    if (resp && resp.status === 200) {
                        this.initUnReadList();
                        this.initReadList();
                        this.initRecycleList();
                        Message.success("全部删除成功！");
                    }
                });
            },
            clearRecycle() {
                deleteAllStaMsg().then(resp => {
                    if (resp && resp.status === 200) {
                        this.initUnReadList();
                        this.initReadList();
                        this.initRecycleList();
                        Message.success("清空回收站成功！");
                    }
                });
            }
        },
    }
</script>

<style>
.message-title{
    cursor: pointer;
}
.handle-row{
    margin-top: 30px;
}
</style>

